{layout name="common/layout" /}
<style>
	body {
		background-color: rgb(244, 246, 248);
		font-size: 12px;
	}

	a:active,
	a:visited,
	a:hover,
	a:link,
	a {
		text-decoration: none;
	}

	h4 {
		margin: 0;
	}

	em {
		font-style: normal;
	}

	.container {
		width: 1170px;
		margin-right: auto;
		margin-left: auto;
		padding-left: 15px;
		padding-right: 15px;
	}

	ul,
	ol,
	li,
	dl,
	dt,
	p,
	dd {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#index-focus .item {
		min-height: 500px;
		background-color: rgba(54, 63, 72, 0.34);
		background-size: cover;
		background-attachment: scroll;
		background-position: center;
	}

	#index-focus .item .carousel-text {
		width: 500px;
		margin-top: 114px;
	}

	#index-focus .item .carousel-text h2 {
		margin-top: 30px;
		margin-bottom: 25px;
		font-size: 50px;
		line-height: 56px;
		font-weight: bold;
		color: #fff;
	}

	#index-focus .item .carousel-text p {
		margin-bottom: 30px;
		font-size: 18px;
		color: #fff;
		line-height: 28px;
	}

	@media (max-width: 767px) {
		#index-focus .item .carousel-text {
			width: 100%;
		}
	}

	/* 主体内容 */
	.content-title {
		background-color: #FCFCFC;
		text-align: left;
		border-color: #007bff #E7E7E7 #E7E7E7;
		border-style: solid;
		border-width: 2px 1px 1px;
	}

	.content-title h4 {
		padding: 6px 15px 5px;
		color: #777777;
		font-size: 14px;
	}

	.goodslist-bar {
		display: flex;
		background: #F7F7F7;
		height: 44px;
		border-bottom: solid 1px #D8D8D8;
		padding: 6px 0;
		text-align: center;
	}

	.goodslist-bar .goods {
		display: flex;
		float: left;
		padding: 6px 8px 6px 4px;
		margin-left: 24px;
	}

	.goodslist-bar .goods li {
		position: relative;
		margin: 0 1px;
	}

	.goodslist-bar .goods li a {
		line-height: 17px;
		color: #555;
		width: 28px;
		padding: 0 14px 0 4px;
	}

	.goodslist-bar .goods li.selected a {
		font-weight: 700;
		color: #007bff;
	}

	.goodslist-bar .search {
		display: flex;
		align-items: center;
		width: 180px;
		margin: auto;
	}

	.goodslist-bar .search input[type="text"] {
		font-family: Tahoma;
		height: 25px;
		width: 120px;
		line-height: 16px;
		background-color: #F9F9F9;
		padding: 1px 2px 3px 4px;
		border: solid 1px;
		border-color: #CCC #DDD #DDD #CCC;
		box-shadow: 2px 2px 1px 0 #E7E7E7 inset;
		-moz-box-shadow: 2px 2px 1px 0 #E7E7E7 inset;
		-webkit--box-shadow: 2px 2px 1px 0 #E7E7E7 inset;
		font-size: 12px;
	}

	.goodslist-bar .search .btn {
		border: solid 1px #0040ff;
		text-decoration: none;
		border-radius: 4px;
		background-color: #007bff;
		color: #FFF;
		padding: 4px 8px;
		line-height: 16px;
		text-shadow: 1px 1px 0 #007bff;
		box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .1);
		-moz-box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .1);
		-webkit-box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .1);
	}


	.allAoods {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		text-align: left;
		border-color: #E7E7E7;
		border-style: solid;
		border-width: 0 1px 1px;
		width: 1141px;
		background-color: rgb(248, 248, 248);
		box-sizing: border-box;
	}

	.allAoods .product {
		display: flex;
		flex-direction: column;
		padding: 19px 54px 9px;
		width: 25%;
		height: 285px;
		background-color: #fff;
		box-sizing: border-box;
		border: solid #E7E7E7;
		border-width: 0 1px 1px 0;

	}

	.allAoods .product .description {
		margin-top: 8px;
		color: rgb(153, 153, 153);
		font-family: 思源黑体;
	}

	.allAoods .product .price {
		margin-top: 10px;
		color: red;
	}

	.allAoods a .img {
		text-align: center;
		overflow: hidden;
	}

	.allAoods a img {
		transition: transform 0.1s ease-in;
	}

	.allAoods a img:hover {
		transform: scale(1.1);
	}

	.pagination {
		margin: 0 auto;
		width: 100%;
		text-align: center;
		padding: 15px 0;
	}

	.pagination ul li {
		vertical-align: top;
		letter-spacing: normal;
		word-spacing: normal;
		display: inline-block;
		margin: 0 0 0 -1px;
	}

	.pagination li:first-child {
		margin-right: 8px;
	}

	.pagination li:last-child {
		margin-left: 8px;
	}

	.pagination li span {
		font: normal 14px/20px "microsoft yahei";
		color: #AAA;
		background-color: #FAFAFA;
		text-align: center;
		display: block;
		min-width: 20px;
		padding: 8px;
		border: 1px solid #E6E6E6;
		position: relative;
		z-index: 1;
	}

	/* 三角箭头 */
	.triangle-up {
		position: absolute;
		top: -1px;
		left: 29px;
		width: 0px;
		height: 0px;
		border: 4px solid black;
		border-left-color: transparent;
		border-right-color: transparent;
		border-top-color: transparent;
	}

	.triangle-down {
		position: absolute;
		top: 10px;
		left: 29px;
		width: 0px;
		height: 0px;
		border: 4px solid black;
		border-left-color: transparent;
		border-right-color: transparent;
		border-bottom-color: transparent;
	}
</style>
<link rel="stylesheet" href="__ADDON__/css/animate.css" />
<div class="swiper-container index-focus">
	<!-- S 焦点图 -->
	<div id="index-focus" class="carousel slide carousel-focus" data-ride="carousel">
		<ol class="carousel-indicators">
			{shop:blocklist id="block" name="indexfocus" row="5"}
			<li data-target="#index-focus" data-slide-to="{:$i-1}" class="{if $i==1}active{/if}"></li>
			{/shop:blocklist}
		</ol>
		<div class="carousel-inner" role="listbox">
			{shop:blocklist id="block" name="indexfocus" row="5"}
			<div class="item {if $i==1}active{/if}"
				style="background-image:linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.63)), url('{$block.image}')">
				<a href="{$block.url}">
					<div class="container">
						<div class="carousel-text pull-right">
							{$block.content}
						</div>
					</div>
				</a>
			</div>
			{/shop:blocklist}
		</div>
		<a class="left carousel-control" href="#index-focus" role="button" data-slide="prev">
			<span class="icon-prev fa fa-chevron-left" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="right carousel-control" href="#index-focus" role="button" data-slide="next">
			<span class="icon-next fa fa-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>

	</div>
	<!-- E 焦点图 -->
</div>

<!-- 主体内容 -->
<div class="container">
	<div class="content-title">
		<h4>全部商品</h4>
	</div>
	<div class="goodslist-bar">
		<ul class="goods">
			<li class="selected"><a class="desc" href="">新品</a>
				<div class="triangle-up"></div>
				<div class="triangle-down"></div>
			</li>
			<li class=""><a href="">价格</a>
				<div class="triangle-up"></div>
				<div class="triangle-down"></div>
			</li>
			<li class=""><a href="">销量</a>
				<div class="triangle-up"></div>
				<div class="triangle-down"></div>
			</li>
			<li class=""><a href="">收藏</a>
				<div class="triangle-up"></div>
				<div class="triangle-down"></div>
			</li>
			<li class=""><a href="">人气</a>
				<div class="triangle-up"></div>
				<div class="triangle-down"></div>
		</ul>
		<div class="search">
			<form name="searchShop" method="get" action="">
				<input type="text" class="text" placeholder="搜索店内商品">
				<button class="btn">搜索</button>
			</form>
		</div>
	</div>
	<div class="allAoods">
		{foreach $goodsList as $goods}
		<a href="{$goods.url}">
			<div class="product">
				<div class="img"><img src="{$goods.image|cdnurl}" width="180px" height="180px" /></div>
				<div class="description"><a href="{$goods.url}" title="{$goods.title}">{$goods.title}</a>
				</div>
				<div class="price">￥<span>{$goods.price}</span></div>
			</div>
		</a>
		{/foreach}
	</div>
	<div class="pagination">
		<ul>
			<li><a href=""><span>首页</span></a></li>
			<li><a href=""><span>上一页</span></a></li>
			<li><a href=""><span class="currentpage">1</span></a></li>
			<li><a href=""><span>下一页</span></a></li>
			<li><a href=""><span>末页</span></a></li>
		</ul>
	</div>
</div>